<template>
    <div>
        <ul style="margin-left: 10%;">
            <li class="home-li" v-for="(data,index) in home.data" :key="index" @click="onHome(data)">
                <div><img :src="'../../static/img/icon/'+data.icon+'-64.png'"/></div>
                <div>{{data.name}}</div>
            </li>
            <li class="home-li" style="color: #867f7f;" @click="loginOut()">
                <div><img src="../../../../static/img/icon/exit.png"/></div>
                <div>退出</div>
            </li>
        </ul>
    </div>
</template>

<script src="../assets/js/index.js">

</script>
<style>
    .home-li {
        height: 200px;
        width: 200px;
        background-color: #fff;
        margin-top: 4%;
        margin-left: 6%;
        float: left;
        text-align: center;
        padding-top: 4%;
        display: block;
        font-size: 24px;
        line-height: 56px;
        color: #002967;
        cursor: pointer;
        -moz-box-shadow: 7px 5px 5px #8396b4;
        -webkit-box-shadow: 7px 5px 5px #8396b4;
        box-shadow: 7px 5px 5px #8396b4;
    }
</style>
